<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米家电</title>

        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .layout-arcoss { 
                width: 100% ; 
                /* background: #dedede ; */
            }
            .layout-center { 
                /* background: #ffff00; */
                width: 1226px; 
                height: 686px ;
                margin: auto ; 
            }

            .layout-center h1 { margin: 0 ; line-height: 60px ; }

            .layout-center .item {
                width: 234px ;
                height: 300px ;
                float: left ;
                margin-right: 14px ;
                margin-top: 14px ;
                background: #dedede ;
            }

            .layout-center .state:hover {
                box-shadow: 0 5px 10px -5px purple;
            }

            .layout-center .last {
                margin-right: 0 ;
            }
        </style>

    </head>
    <body>

        <div class="layout-arcoss">
            <div class="layout-center">
                <h1>家电</h1>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item state last"></div>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item state"></div>
                <div class="item last" style="background: transparent;">
                    <div class="state" style="height: 143px ; margin-bottom: 14px ; background: #ff0;"></div>
                    <div class="state" style="height: 143px ; background: #ff0;"></div>
                </div>
            </div>
        </div>
        
    </body>
</html>